import React, { PropsWithChildren, useEffect, useRef } from 'react';
import { useDropComponent } from '../../../hooks/useDropComponent';
import classNames from 'classnames';
import { useDrag } from 'react-dnd';
import { DragMethod } from '../MaterialArea/ComponentButton';

interface WrapperComponentProps extends PropsWithChildren {
  id: number;
  accept?: Array<string>;
  type?: string;
}

const WrapperComponent: React.FC<WrapperComponentProps> = ({ 
  id, 
  accept = ['Container'], 
  children, 
  type = 'Button' 
}) => {
  // 拖拽逻辑优化
  const [{ isDragging }, drag] = useDrag({
    type: type,
    item: { type, desc: '按钮', id, method: DragMethod.MOVE },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
      itemType: monitor.getItemType()
    })
  });

  const ref = useRef<HTMLDivElement>(null);

  // 拖放区域逻辑
  const topDrop = useDropComponent(id, accept, 'before');
  const bottomDrop = useDropComponent(id, accept, 'after');

  // 动态样式生成
  const getDropLineClass = (isOver: boolean) => 
    classNames(
      'w-full h-1 transition-all duration-300', // 增大高度并添加过渡动画
      {
        'bg-indigo-500/80 scale-y-125': isOver, // 悬停时的高亮效果
        'bg-transparent': !isOver
      }
    );

  const wrapperClass = classNames(
    'WrapperComponent my-1 relative transition-all',
    {
      'opacity-30 scale-95': isDragging, // 拖拽时的透明度和缩放
      'shadow-lg': isDragging,           // 拖拽时添加阴影
      'z-50': isDragging                 // 确保拖拽元素在最上层
    }
  );
  useEffect(() => {
    drag(ref)

  }, []);
  

  return (
    <div className={wrapperClass}>
      {/* 顶部拖拽区域（带动画效果） */}
      <div 
        className={getDropLineClass(topDrop.isOver)} 
        ref={topDrop.drop}
        style={{ transformOrigin: 'top center' }}
      />
      
      {/* 内容区域（优化拖拽手柄） */}
      <div 
        ref={ref} 
        className={classNames(
          'my-1 p-2 border-2 rounded-md transition-colors',
          {
            'border-indigo-500': isDragging,       // 拖拽时的边框高亮
            'border-transparent ': !isDragging,
            'cursor-grab active:cursor-grabbing': !isDragging // 拖拽手柄样式
          }
        )}
      >
        {children}
      </div>

      {/* 底部拖拽区域（带动画效果） */}
      <div 
        className={getDropLineClass(bottomDrop.isOver)} 
        ref={bottomDrop.drop}
        style={{ transformOrigin: 'bottom center' }}
      />
    </div>
  );
};

export default WrapperComponent;
